<template>
	<view class="">
		<!-- <tabsTop tabName="合美供销平台"></tabsTop> -->
		<!-- 是否有搜索框 -->
		<view class="" v-if="topdata.isSearch">
				<mySearch class="searchClick" @click="searchClick()"></mySearch>
		</view>
		<view class="w-100" style="height:450rpx" v-if="topdata.hasOwnProperty('topImg')">
			<!-- #99 调接口返回的数据 -->
			<image :src="Domain_IMG+topdata.topImg" mode="" class="img"></image>
		</view>
		<!-- 是否有导航 -->
		<view class="bg-white" v-if="0">
			<view class="mx-1 pt-2 flex justify-between flex-wrap">
				<view style="width: 20%;" class="flex flex-column align-center" v-for="(item,index) in navArr"
					:key="index" @click="navClick(item.img)">
					<view class="" style="width:110rpx;height: 110rpx;">
						<image :src="Domain_IMG+item.img" alt="" class="img">
						</image>
					</view>
					<view class="flex justify-center align-center py-3 mb-2" style="font-size: 25rpx;">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="flex flex-wrap" v-if="midImg.length>0">
			<view class="" style="width: 50%;height:300rpx" v-for="(item,index) in midImg">
				<image :src="Domain_IMG+item" mode="" class="img"></image>
			</view>
		</view>
		<!-- 根据省份判读是否存在当前模块-->
		<view v-if="proCity.hasOwnProperty('procity')">
			<!-- 有省份显示省份模块 -->
			<view v-if="proCity.City.length==0" class="flex flex-wrap justify-between px-2" style="background-color: #fff;">
				<!-- #99 调接口返回的数据 -->
				<view class="flex mt-3 justify-between align-center" v-for="(item,index) in proCity.province" :key="index"
					style="width:48% ;height:200rpx" @click="provinceClick(item,index)">
					<view class="left flex flex-column justify-center align-center">
						<text class="font-md font-weight-bolder mb-2">{{item}}</text>
						<view class="font-sm font-weight-bolder py px-2 rounded-lg" style="border:1px solid #000">
							点击进入
						</view>
					</view>
					<view class="" style="width: 130rpx;height:130rpx;">
						<!-- #99 调接口返回的数据 -->
						<image :src="Domain_dead+proCityimg[index]" mode="" class="img rounded-circle"></image>
					</view>
				</view>
			</view>
			<!-- 有省有市显示的模块 -->
			<!-- 省市地址 -->
			<view class="flex flex-wrap justify-between px-2" style="background-color: #fff;" v-else>
				<view class=" flex mt-3 justify-between align-center flex-shrink" v-for="(item,index) in proCity.City"
					:key="item" style="width: 48%; height:200rpx">
					<view class="left flex flex-column justify-center">
						<view class="">
							<text class="font">{{proCity.procity}}</text><br>
							<text class="font">{{item.xian}}</text>
						</view>
						<!-- <view class="flex justify-center align-center font font-weight-bolder px-2 rounded-circle mt-1" style="border:1px solid #000;width:40%">
							<text class="pl-1 mr-1">GO</text><uni-icons type="right" size="20"></uni-icons>
						</view> -->
					</view>
					<view class="" style="width: 130rpx;height:130rpx;">
						<!-- #99 调接口返回的数据 -->
						<image :src="Domain_dead+item.img" mode="aspectFit" class="img rounded-circle"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表模块 -->
		<!-- botdata.length> -->
		<view class="product-list px-3 pt-1" style="background-color: #000;" v-if="goods.length>0">
			<view class="sign_row flex flex-wrap justify-between">
				<!-- 循环生成两个商品数据 -->
				<!-- #99 要改的参数 -->
				<view class="bg-white mb-3 rounded-lg overflow-hidden" v-for="(item,index) in goods" :key="index"
					style="width: 330rpx"
					@click="productClick(item.Article_Name,item.Article_SerialNumber,item.Sales_Unit_Price_SerialNumber,item.Store_SerialNumber)">
					<view class="w-100" style="height: 350rpx;">
						<image :src="Domain_IMG+item.Picture_URL " :alt="item.Article_serialNumber " class="img"></image>
					</view>
					<view class="px-2">
						<!-- 这行根据数据显示人气第几 -->
						<!-- <view class="product-name pt-2 font-sm"></view> -->
						<view class="flex justify-between flex-column py-3">
							<!-- 商品名 -->
							<view class="font-sm">
								{{item.Article_Name}}
							</view>
							<view class="flex justify-between mt-3">
								<!-- 商品价格 -->
								<view class="flex align-center align-center">
									<money :money="item.specifications[0].Sales_Unit_Price "></money>
								</view>
								<!-- 马上抢 -->
								<view style="width: 40rpx; height: 40rpx;" @click.stop="shopCart(item)">
									<image :src="Domain_ICON+'/shopcart.png'" mode="" class="img" style="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车弹窗 -->
		<popUp type="top" :show='shopcart' @Close="()=>{shopcart=false}" Height="70">
			<view class="flex ml-3" style="width: 70%;">
				<!-- <view class="getValue" :data-Article_SerialNumber="good.Article_SerialNumber"
					:data-quantity="good.quantity" :data-Unit_Price="good.specifications[0].Unit_Price">
				</view> -->
				<!-- <view class="get_samevalue"
					:data-Sales_Unit_Price_Stock_SerialNumber="good.Sales_Unit_Price_Stock_SerialNumber">
		
				</view> -->
				<!-- 商品图片 -->
				<view class="py-3" style="width:270rpx;height: 270rpx;">
					<image :src="Domain_IMG+good.Picture_URL" mode="" class="img"></image>
				</view>
				<!-- 商品信息 -->
				<view class="ml-2 flex flex-column justify-end pb-4" style="width: 200rpx;">
					<!-- 商品价格 -->
					<money :money="good.specifications[0].Sales_Unit_Price"></money>
					<!-- 商品剩余数量 -->
					<view class="font-sm" style="color: #ccc;" >
						<text >剩余{{good.specifications[0].Stock_Remain}}件</text>
					</view>
				</view>
			</view>
			<!-- <view class="" v-if="">
				<view class="">
					购买规格
				</view>
				<!-- 没有规格名 -->
				<!-- <view class="" v-for="(item,index) in good.specifications">
					<view class="">
						{{}}
					</view>
				</view>
			</view> -->
			<view class="flex justify-between mx-3 mt-3">
				<view class="font">购买数量</view>
				<view class="">
					<counter :num="good.quantity" :max="good.specifications[0].Stock_Remain" @Count="counterClick">
					</counter>
				</view>
			</view>
			<view class="shop-cart position-fixed flex justify-center font text-white "
				style=" bottom:20rpx; margin:0 auto">
				<button class="btn-left text-white" :disabled="loading" @click="addCart()">加入购物车</button>
				<button class="btn-right text-white" @click="buyNow()">立即购买</button>
			</view>
		</popUp>
		<botSponsor></botSponsor>
		<tabsBottom></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import popUp from "@/components/tabs/pop-up.vue"
	import {
		getHMGXLocation,
		getHMGXGoods
	} from "@/api/index.js"
	import mySearch  from "@/components/mysearch/mysearch.vue"
	import {getColumnConfig,getWX2GoodsIdAction} from "@/api/index.js"
	import money from "@/components/tool/money.vue"
	import counter from "@/components/tool/counter.vue"
	import {
		getAddAction
	} from "@/api/global.js"
	import {
		getWXCheckShopCarAction,
		editWXEditShopCarQuantity
	} from "@/api/article.js"
	import {
		NowTime
	} from "@/static/js/DateUtil.js"
	import {
		accMul
	} from "@/static/js/GeneralUtil.js"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			botSponsor,
			mySearch,
			popUp,
			money,
			counter
		},
		data() {
			return {
				Domain_ICON: app.globalData.Domain_ICON,
				Domain_IMG:app.globalData.Domain_IMG,
				Domain_dead:app.globalData.Domain_dead,
				topdata: {}, // 顶部拿回来的数据
				botdata: [], // 底部拿回来的数据
				proCity: {}, //存放省份+城市
				isSearch: false, // 判断是否有搜索框
				midImg: '', //  中间位置是否有商品详情图片，有就显示
				goods: [], //  多种商品
				good:{},   // 点击购物车，获取单个商品信息
				navArr:[], // 导航
				shopcart:false
			}
		},
		onLoad(option) {
			this.getData(option.ShopColumn_Id);
			this.getWX2GoodsIdAction(option.ShopColumn_Id)
		},
		methods: {
			async getData(ShopColumn_Id) {
				const res=await getColumnConfig({
					ShopColumn_Id,
					Open_ID:app.globalData.Open_ID
				});
				console.log(res);
				// 判断是否存在顶部图片
				if(res.Data.hasOwnProperty('img')){
					this.$set(this.topdata,"topImg",res.Data.img)
					this.topdata['topImg']=res.Data.img
				}
				// 判断是否存在地址
				if(res.Data.hasOwnProperty('procity')){
					this.$set(this.proCity,"procity",res.Data.procity.procity)
					this.$set(this.proCity,"City",res.Data.procity.City)
				}
				console.log(this.proCity);
				// 
			},
			async getWX2GoodsIdAction(ShopColumn_Id){
				const res=await getWX2GoodsIdAction({
					ShopColumn_Id,
					Open_ID:app.globalData.Open_ID,
					page:1,
					limit:10
				})
				console.log(res);
				if(res.Status=="success"){
					this.goods=res.tableData;
					
				}
			},
			// 点击商品,进入商品详情页
			// 点击商品,进入商品详情页
			productClick(name, Article_SerialNumber, Sales_Unit_Price_SerialNumber,Store_SerialNumber) {
				uni.navigateTo({
					url: "/pages/index/productDetails?name=" + name + "&Article_SerialNumber=" +
						Article_SerialNumber + "&Sales_Unit_Price_SerialNumber=" + Sales_Unit_Price_SerialNumber + "&Store_SerialNumber="+Store_SerialNumber
				})
			},
			provinceClick(name, index) {
				uni.navigateTo({
					url: "/pages/index/manygoods"
				})
			},
			// 点击购物车图标，出现购物车弹窗
			shopCart(item) {
				console.log(item);
				this.loading = false;
				this.good = {
					...item
				}
				console.log(this.good);
				this.$set(this.good, "quantity", 1)
				// 传入需要拿到数据的选择器
				// this.getvalues('.getValue');
				this.shopcart = !this.shopcart;
			},
			// 购物车弹窗计数器
			counterClick(e) {
				this.good.quantity = e;
			},
			// 判断购物车有无相同商品
			async getWXCheckShopCarAction(Sales_Unit_Price_Stock_SerialNumber) {
				console.log(Sales_Unit_Price_Stock_SerialNumber);
				var res = await getWXCheckShopCarAction({
					App_ID: app.globalData.App_ID,
					Open_ID: app.globalData.Open_ID,
					Sales_Unit_Price_Stock_SerialNumber,
				})
				return res;
			},
			// 添加到购物车
			async addCart() {
				this.loading = true;
				if (!this.good.quantity) {
					this.good.quantity = 1
				}
				
				var sales_order = {
					Sales_Order_SerialNumber: '',
					Store_SerialNumber: this.good.Store_SerialNumber,
					Sales_Address: '',
					Sales_Contacts: '',
					Sales_Phone: '',
					Sales_Message: '',
					Sales_Date: NowTime(),
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Sales_Amount: '',
					Collection_Amount: 0,
					Delivery_Amount: 0,
					Receive_Type: 0,
					Refund_Type: 0,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					Row_Status: 8,
					Children: {
						sales_order_detail: [{
							Sales_Order_Detail_SerialNumber: '',
							Sales_Order_SerialNumber: '',
							Sales_Unit_Price_Stock_SerialNumber: this.good.specifications[0]
								.Sales_Unit_Price_Stock_SerialNumber,
							Article_SerialNumber: this.good.Article_SerialNumber,
							Article_Specifications_SerialNumber: this.good.specifications[0]
								.Article_Specifications_SerialNumber,
							Sign: this.good.specifications[0].Sign,
							Quantity: this.good.quantity,
							Unit_Price: this.good.specifications[0].Unit_Price,
							Sales_Unit_Price: this.good.specifications[0].Sales_Unit_Price,
							Amount: '',
							Row_Status: 8,
							Receive_Type: 0,
							Refund_Type: 0,
						}]
					}
				}
				var res = await this.getWXCheckShopCarAction(this.good.specifications[0]
					.Sales_Unit_Price_Stock_SerialNumber);
				if (res.length == 0) {
					// 增加流程
					sales_order.Children.sales_order_detail[0].Amount = accMul(this.good.specifications[0]
						.Sales_Unit_Price, this.good.quantity)
					uni.showLoading({
						title: "加载中...",
					});
			
					var addres = await getAddAction({
						Data: JSON.stringify({
							sales_order: [sales_order]
						}),
						Open_ID: app.globalData.Open_ID
					})
					uni.hideLoading();
					if (addres.Status == "success") {
						uni.showToast({
							title: '提交成功！',
							icon: 'success'
						})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							this.shopcart = false;
						}, 500)
					} else {
						uni.showToast({
							title: '提交失败！',
							icon: 'error'
						})
					}
				} else {
					uni.showLoading({
						title: "加载中...",
					});
					// 修改购物车商品数量
					var editres = await editWXEditShopCarQuantity({
						Open_ID: app.globalData.Open_ID,
						Article_SerialNumber: res[0].Article_SerialNumber,
						Quantity: this.good.quantity,
						Type: "1"
					})
					uni.hideLoading();
					if (editres.Status == "success") {
						uni.showToast({
							title: '提交成功！',
							icon: 'success'
						})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							this.shopcart = false;
						}, 500)
					} else {
						uni.showToast({
							title: '提交失败！',
							icon: 'error'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-cart {
		width: 100%;
	
		.btn-left {
			padding: 0;
			margin: 0;
			width: 45%;
			border-radius: 0;
			border-top-left-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
			background-color: #383838;
		}
	
		.btn-right {
			padding: 0;
			margin: 0;
			width: 45%;
			border-radius: 0;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			background-color: #09BB07;
		}
	}
</style>